<script lang="ts" setup>
import { defineProps } from "vue";
import ShoppingCartButton from "./Foot.vue";
export interface Product {
  id: number;
  name: string;
  describe: string;
  price: number;
  isHot?: boolean;
  quantity?: number;
}
defineProps<{
  product: Product;
}>();
</script>
<template>
  <div class="list_li">
    <div class="li_img">商品图片</div>
    <p v-text="product.name"></p>
    <span v-text="product.describe"></span>
    <h3>
      ¥{{ product.price }} <span class="isHot" v-if="product.isHot">热销</span>
    </h3>
    <ShoppingCartButton :product="product"></ShoppingCartButton>
  </div>
</template>
<style scoped>
.list_li {
  position: relative;
  width: 280px;
  border-radius: 5px;
  height: 100%;
  text-align: left;
  overflow: hidden;
  margin: 0 18px 20px 0;
  box-shadow: 2px 2px 5px #ccc;
}
.li_img {
  width: 100%;
  height: 200px;
  text-align: center;
  line-height: 200px;
  background: #abe1cc;
}
.list_li p {
  font-size: 18px;
  line-height: 30px;
}
.list_li span {
  display: block;
  font-size: 14px;
  color: #888;
}
.list_li h3 {
  font-size: 28px;
  color: #cf4444;
  line-height: 60px;
}
.list_li .isHot {
  position: absolute;
  padding: 2px 4px;
  text-align: center;
  line-height: 30px;
  background: #cf4444;
  border-radius: 10px;
  top: 10px;
  right: 10px;
  color: yellow;
  font-family: "宋体";
}
</style>
